<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .content {
            height: 2000px;
        }

        .goTop {
            width: 100px;
            height: 100px;
            background-color: #bbb;
            text-align: center;
            line-height: 100px;
            position: fixed;
            bottom: 100px;
            right: 820px;
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="content">
		<a href="https://blog.csdn.net/Bdbdbdnnd/article/details/124305480?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-2-124305480-null-null.pc_agg_new_rank&utm_term=js%E7%BC%93%E6%85%A2%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E4%BB%A3%E7%A0%81&spm=1000.2123.3001.4430">CSDN博主</a>
        <div class="goTop">返回</div>
    </div>
 
    <script>
        //当用户滑动滚动条达到400px，返回按钮显示，小于400px隐藏
        //点击返回按钮时，让滚动条恢复原位
 
        //第一个功能
        let goTop = document.getElementsByClassName('goTop')[0];
        //滑动用到window的onscroll（）的方法
        window.onscroll = function () {
            //让谁进行滚动 body html（有的浏览器获取不到body或html），所以做一个兼容的方式
            //scrollTop据顶部的滑动的距离
            let res = document.body.scrollTop || document.documentElement.scrollTop;
            if (res >= 400) {//当大于400px，按钮出现
                goTop.style.display = 'block';
            } else {
                goTop.style.display = 'none';
            }
 
        }
		
        //第二个功能，点击返回功能
        goTop.onclick = function () {
               var s=document.documentElement.scrollTop;
                    // 定时器 每10ms执行一次
                    timer=window.setInterval(function (){
                        // 每次走50
                        s-=50;
                        //  到顶部后清除定时器  必须清定时器  不然就死循环了
                        if (s<0){
                            window.clearInterval(timer);
                        }
                        window.scrollTo(0,s);
                    },10);
        }
    </script>
</body>
 
</html>